<template>
	<view class="category">
		<view class="ctry-content">

			<scroll-view class="nav-left" scroll-y>
				<block v-for="(item,index) in cateList" :key="index">
					<view class="nav-left-item " @click="onCategory(item.cateid)" :class="item.cateid == navActiveID ? 'nav-active' : '' "
					 :id="item.id">
						{{item.catename}}
					</view>
				</block>
			</scroll-view>
			<!-- val.procate -->
			<!--  -->
			<!-- v-show="navActiveID == allData.val[0].procate" -->
			<view class="nav-right">
				<view class="noDatePageStyle" v-if="!allData.val">
					<text>暂无数据</text>
				</view>
				<scroll-view v-else scroll-y="true" class="nav-right-content" @scrolltoupper="pullDown" upper-threshold="100">
					<!-- <button type="primary" @click="pullDown">下啦</button> -->
					<view class="top-img">
						<image :src="allData.act_img" mode="aspectFill"></image>
					</view>
					<view class="nav-right-box">

						<view class="nav-right-item" v-for="(val,index) in allData.val" :key="index">
							<image :src="val.proimgs[0]" mode="aspectFill" @click="navTo(val.proid)"></image>
							<view class="item-title">
								{{val.proname}}
							</view>
							<view class="item-msg">
								<text class="price-1">￥ <text class="price-1-1">{{val.int_nowprice}}</text> .{{val.dec_nowprice}}</text>
								<!-- <text class="price-2">￥{{val.int_preprice}}</text> -->
								<text class="msg-3">仅剩{{val.pronums}}</text>
							</view>
							<view class="item-line3">
								<image src="/static/imgs/people.png" mode="aspectFill" class="user-icon"></image>
								<text class="font20">{{val.distance}}米</text>
								<text class="button4" @click="qg(val.proid)">抢购</text>
							</view>
						</view>

					</view>

				</scroll-view>


			</view>


			<!-- <view class="nav-right" v-show="navActiveID == 3">
				2
			</view>
 -->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				LL: {},
				navActiveID: 2,
				cateList: [], //分类名
				allData: [], // 所有数据
				cateList1: [{
						id: '1',
						name: '水果专区'
					},
					{
						id: '2',
						name: '清凉夏日'
					},
					{
						id: '3',
						name: '粮油干货'
					},
					{
						id: '4',
						name: '零食牛奶'
					}, {
						id: '5',
						name: '酒水饮料'
					}, {
						id: '6',
						name: '母婴中心'
					},
					{
						id: '7',
						name: '个护美妆'
					},
					{
						id: '8',
						name: '智能家电'
					}, {
						id: '9',
						name: '手机数码'
					}, {
						id: '10',
						name: '家居清洁'
					},
					{
						id: '11',
						name: '床品箱包'
					},
					{
						id: '12',
						name: '办公户外'
					}

				],

			}
		},

		onShow() {

		},
		onLoad() {
			this.getSort();
			this.getLL();
			this.getData();
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.getData();
				uni.hideLoading();
			}, 1000)
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/index/search'
			})
		},
		methods: {
			async getSort() { // 获取分类
				let cate = await this.$http.getIndexSort({
					typeid: 2
				});
				this.cateList = cate.data;
			},
			async getData() { // 获取分类数据
				let a = await this.$http.getProductList({
					lng: this.LL.long,
					lat: this.LL.lat,
					cateid: this.navActiveID,
					typeid: 2
				});
				this.allData = a.data;
				console.log(a)
				console.log(this.allData)
			},
			pullDown() {
				uni.startPullDownRefresh();
				this.getData();
			},
			getLL() { // 获取经纬度，并保存到缓存中
				// #ifdef APP-PLUS
				this.LL = uni.getStorageSync("lph-ll");
				// #endif

				// #ifndef APP-PLUS
				uni.setStorageSync("lph-ll", {
					long: '114.121224',
					lat: '22.627038'
				});
				this.LL = {
					long: '114.121224',
					lat: '22.627038'
				};
				// #endif

			},
			navTo(proid) { // 
				uni.navigateTo({
					url: `/pages/detail/detail?proid=${proid}`
				})
			},
			qg(proid) {
				uni.navigateTo({
					url: `/pages/discountMall/finishOrder?pro_id=${proid}&quantity=1`
				})
			},
			onCategory(cateid) {

				this.navActiveID = cateid;
				this.getData();


			},

		},


	}
</script>
<style lang="scss" scoped>
	@import 'static/css/lph-category.scss';

	.noDatePageStyle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 45%;
		font-size: 30upx;
		color: #999999;
	}
</style>
